<template>
  <a-modal title="设置推荐视频" :visible="visible" width="75%" @cancel="handleCancel">
    <a-transfer
      :data-source="mockData"
      :target-keys="targetKeys"
      :show-search="showSearch"
      :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
      :show-select-all="false"
      @change="onChange"
      :listStyle="{ width: '50%', paddingTop: '0' }"
    >
      <template
        slot="children"
        slot-scope="{
          props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
          on: { itemSelectAll, itemSelect }
        }"
      >
        <!-- :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })" -->
        <a-table
          :columns="leftColumns"
          :data-source="direction === 'left' ? filteredItems : diffSelected"
          size="small"
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
        >
          <!-- <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
            <a-checkbox
              :value="item.key"
              v-for="item in record._episodes"
              :disabled="direction === 'left' && selectedKeys2['right'].includes(item.key)"
              :checked="selectedRows[direction === 'left' ? 'right' : 'left'].includes(item.key)"
              :key="item.key"
              @change="
                (val) => {
                  checkboxHandler(val.target.value, direction === 'left' ? 'right' : 'left')
                  itemSelect(val.target.value, !selectedKeys.includes(val.target.value))
                }
              "
            >
              第{{ item.name }}集
            </a-checkbox>
          </p> -->
        </a-table>
      </template>
    </a-transfer>
  </a-modal>
</template>

<script>
import lodash from 'lodash'
import { shortVideoList, shortEpisodesList } from '@/api/short'
// const mockData = [];
// for (let i = 0; i < 20; i++) {
//     mockData.push({
//         key: i.toString(),
//         title: `content${i + 1}`,
//         description: `description of content${i + 1}`,
//         disabled: i % 4 === 0,
//     });
// }

// const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);

const leftTableColumns = [
  {
    dataIndex: 'title',
    title: '剧集名称'
  }
  // {
  //     dataIndex: 'description',
  //     title: 'Description',
  // },
]
const rightTableColumns = [
  {
    dataIndex: 'title',
    title: '剧集名称'
  }
]
export default {
  // props: {
  //     show: {
  //         type: Boolean,
  //         default: true
  //     },
  // },
  data() {
    return {
      mockData: [],
      targetKeys: [],
      disabled: false,
      showSearch: false,
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,
      visible: false,
      queryParam: {
        pageSize: 10,
        pageNum: 1
      },
      checkedList: [],
      expandIndex: 0,
      formatData: [],
      diffSelected: [],
      selectedRows: {
        left: [],
        right: []
      },
      selectedKeys2: {
        left: [],
        right: []
      }
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
    },
    checkboxHandler(val, direction) {
      this.selectedRows[direction] = lodash.uniq([val, ...this.selectedRows[direction]])
      console.log(
        lodash.uniq([val, ...this.selectedRows[direction]]),
        direction,
        'lodash.uniq([val, ...this.selectedRows[direction]])'
      )
    },
    expandHandler(expanded, record) {
      if (expanded) {
        const index = this.mockData.findIndex((v) => v.id === record.id)
        this.expandIndex = index
        shortEpisodesList({ vid: record.id }).then((resp) => {
          resp.data.data.records.forEach((v) => {
            v.key = v.id + ''
          })
          this.mockData[index]._episodes = resp.data.data.records
          console.log(resp, record, 'shortEpisodesList')
        })
      } else {
        this.expandIndex = ''
      }
    },
    open(records) {
      shortEpisodesList({ vid: records.id }).then((resp) => {
        resp.data.data.records.forEach((v) => {
          v.key = v.id + ''
        })
        this.mockData[index] = resp.data.data.records
      })
      this.visible = true
    },
    init() {
      shortVideoList(this.queryParam).then((resp) => {
        resp.data.records.forEach((v) => {
          ;(v.key = v.id + ''), (v._episodes = [])
        })
        this.mockData = resp.data.records
      })
    },
    onChange(nextTargetKeys, direction) {
      const selecteds = []
      debugger
      const diffSelected =
        direction === 'right'
          ? this.mockData.filter((v) => v._episodes && v._episodes.length)
          : this.diffSelected
      console.log(diffSelected, direction, 'this.selectedRows[direction]')
      if (direction === 'right') {
        diffSelected.forEach((v) => {
          selecteds.push({
            ...v,
            _episodes: v._episodes.filter((v1) => this.selectedRows[direction].includes(v1.key))
          })
        })
        this.diffSelected = selecteds
      } else {
        diffSelected.forEach((v) => {
          v._episodes.forEach((v1, i) => {
            if (this.selectedRows[direction].includes(v1.key)) {
              v._episodes.splice(i, 1)
            }
          })
        })
        this.diffSelected = diffSelected
      }
      // const treeSelectedKeys = lodash.difference(this.mockData.map(v=>v.key), nextTargetKeys)
      this.targetKeys = nextTargetKeys
      // this.diffSelected = selecteds
      this.selectedKeys2[direction] = this.selectedRows[direction]
      this.selectedRows[direction] = []
    },

    triggerDisable(disabled) {
      this.disabled = disabled
    },

    triggerShowSearch(showSearch) {
      this.showSearch = showSearch
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      console.log(
        disabled,
        selectedKeys,
        itemSelectAll,
        itemSelect,
        'disabled, selectedKeys, itemSelectAll, itemSelect'
      )
      return {
        getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter((item) => !item.disabled)
            .map(({ key }) => key)
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys)
          itemSelectAll(diffKeys, selected)
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-transfer-list-header {
  display: none;
}
</style>
